<template>
    <view class="content">
        <view class="hd__tab_fiexd">
            <view class="hd__tab">
                <view :class="type == 'all' ? 'item active' : 'item'" @tap="changeType('all')">全部</view>
                <view :class="type == 'wait' ? 'item active' : 'item'" @tap="changeType('wait')">待接单</view>
                <view :class="type == 'untreated' ? 'item active' : 'item'" @tap="changeType('untreated')">未核单</view>
                <view :class="type == 'complete' ? 'item active' : 'item'" @tap="changeType('complete')">已完成</view>
                <view :class="type == 'refuse' ? 'item active' : 'item'" @tap="changeType('refuse')">已拒单</view>
            </view>
            <view class="pb_header"></view>
        </view>
        <div class="order-warp">
            <div v-for="(item,index) in list" :key="index" @tap="Jump(`detail?order_id=${item.id}`)">
                <div class="stitle">
                    <div class="left">
                        <image src="../../static/images/icon_order.png" class="sorder-image"></image>
                        <p>订单号 {{item.order_no}}</p>
                    </div>
                    <div class="status" v-if="item.order_status == 1">待接订单</div>
                    <div class="status" v-if="item.order_status == 2">未核订单</div>
                    <div class="status" v-if="item.order_status == 3">已取消订单</div>
                    <div class="status" v-if="item.order_status == 4">已拒订单</div>
                    <div class="status" v-if="item.order_status == 5">完成订单</div>
                </div>
                <div class="sitem">
                    <image :src="item.photo" mode="aspectFill" class="cimages"></image>
                    <div class="sinfo">
                        <div class="info-text">
                            <h1>昵称：{{item.nickname}}</h1>
                            <p>预定时间：{{item.reach_time}} <span class="cor">（{{item.mall_name}}）</span></p>
                            <p>人数：{{item.number}}人</p>
                        </div>
                        <div class="info-oper">
                            <b class="active" v-if="item.order_status == 1" @tap.stop="accept(item.id)">
                                <image src="../../static/images/border.png" mode=""></image><span>接单</span>
                            </b>
                            <b @tap.stop="deleteorder(item.id)" v-if="item.order_status >= 3">删除订单</b>
                            <b v-if="item.order_status == 1" @tap.stop="refuse(item.id)">拒绝</b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 'all',
                page : 1,
                shop_info : [],
                isEmpty : false,
                is_loading : true,
                list : []
            }
        },
        onLoad(e) {
        },
        onShow() {
            this.shop_info = uni.getStorageSync('userinfo');
            this.getData();
        },
         // 到达底部加载更多
        onReachBottom() {
            if (this.is_loading) {
                this.getData();
            }
        },
        methods: {
            Jump(url) {
                uni.navigateTo({
                    url: url
                })
            },
            changeType(type) {
                this.type = type;
                this.page = 1;
                this.list = [];
                this.is_loading = true;
                this.getData();
            },
            //删除订单
			deleteorder(order_id) {
				let t = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除此订单？',
					success: function(res) {
						if (res.confirm) {
							let param = {};
							param.is_loading = true;
							param.url = "";
							param.data = {};
							param.data.order_id = order_id;
							t.util.requests(param, res => {
								t.list.map((item, i) => {
									if (order_id == item.id) {
										t.list.splice(i, 1);
									}
								})
							});
						}
					}
				})
			},
            getData() {
                let t = this,
                    param = {};
                param.is_loading = true;
                param.url = 'api/shop/Home/order_all_type';
                param.data = {};
                param.data.page = t.page;
                param.data.order_type = t.type;
                param.data.shop_id = t.shop_info.id;
                param.data.strip = 20;
                t.util.requests(param, res => {
                    res = res.data.data;
                    t.isEmpty = true;
                    if (res.tou.length == 0) {
                        t.is_loading = false;
                        return false;
                    }
                    t.list = t.list.concat(res.tou);
                    t.page++;
                });
            },
            refuse:function(order_id){
                let t = this;
				uni.showModal({
					title: '提示',
					content: '确定拒绝该订单？',
					success: function(res) {
						if (res.confirm) {
							let param = {};
							param.is_loading = true;
							param.url = "api/shop/home/refuse_order";
							param.data = {};
							param.data.order_id = order_id;
							t.util.requests(param, res => {
								t.list.map((item, i) => {
									if (order_id == item.id) {
										item.order_status = 4;
									}
								})
							});
						}
					}
				})
            },
            accept : function(order_id) {
                let t = this;
                uni.showModal({
                	title: '提示',
                	content: '确定接受该订单？',
                	success: function(res) {
                		if (res.confirm) {
                			let param = {};
                			param.is_loading = true;
                			param.url = "api/shop/home/accept_order";
                			param.data = {};
                			param.data.order_id = order_id;
                			t.util.requests(param, res => {
                				t.list.map((item, i) => {
                					if (order_id == item.id) {
                						item.order_status = 2;
                					}
                				})
                			});
                		}
                	}
                })
            }
        },
    }
</script>
<style>
    page {
        background: #f5f5f5;
    }


    .hd__tab_fiexd .pb_header {
        padding-bottom: 100upx;
    }

    .hd__tab {
        z-index: 10000;
        position: fixed;
        top: 0;
        left: 0;
        width: calc(100% - 60upx);
        height: 100upx;
        padding: 0 30upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100upx;
        background: #212121;
    }

    .hd__tab .item {
        font-size: 30upx;
        color: #fff;
        position: relative;
        height:100upx;
        line-height: 100upx;
    }

    .hd__tab .item.active {
        color: #fc21fc;
    }
    .hd__tab .item.active:after{
        position: absolute;
        left:5%;
        bottom:0;
        width:90%;
        height:1upx;
        content:'';
        display: block;
        background: #fc21fc;
    }

    .order-warp {
        margin: 20upx;
    }

    .stitle {
        padding: 15upx 20upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-top-left-radius: 10upx;
        border-top-right-radius: 10upx;
    }

    .stitle .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .stitle .sorder-image {
        width: 25upx;
        height: 30upx;
        margin-right: 14upx;
    }

    .stitle .status {
        color: #7e00ff;
        font-size: 24upx;
    }

    .stitle p {
        color: #878c97;
        font-size: 24upx;
    }

    .sitem {
        background: #fff;
        padding: 20upx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20upx;
        border-bottom-left-radius: 10upx;
        border-bottom-right-radius: 10upx;
    }

    .cimages {
        width: 110upx;
        height: 110upx;
        background: #f8f8f8;
        border-radius: 50%;
    }

    .sinfo {
        flex: 1;
        margin-left: 20upx;
        line-height: 2;
        display: flex;
        justify-content: space-between;
    }

    .info-oper {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .info-oper b {
        display: block;
        font-size: 22upx;
        color: #999999;
        width: 120upx;
        height: 50upx;
        line-height: 50upx;
        border-radius: 50upx;
        border: 2upx solid #999;
        text-align: center;
        margin-top: 15upx;
        position: relative;
    }

    .info-oper b.active {
        border: 0;
    }

    .info-oper b.active image {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .info-oper b.active span {
        color: #fc21fc;

    }

    .sinfo h1 {
        font-size: 28upx;
        color: #242424;
        margin-bottom: 10upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .sinfo p {
        font-size: 22upx;
        color: #999;
    }

    .cor {
        font-size: 22upx;
        color: #fc21fc;
    }
</style>
